<template>
  <section style="padding: 20px;">
    <div>

    </div>
    <div>
      <div style="margin-bottom:5px">
        <el-button type="primary" size="mini" @click="()=>triggerModify()">新增</el-button>
      </div>

      <el-table
          size="mini"
          border
          ref="multipleTable"
          :data="dataList"
          v-loading="loading"
          tooltip-effect="dark"
          style="width: 100%"
          @row-click="(row)=>{
                  tableRowClickOnece(row,'multipleTable')
                }">
        <el-table-column
            label="" prop="index" min-width="55" type="selection" align="center">
        </el-table-column>

        <el-table-column
            label="id" prop="id" min-width="120" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row['id'] }}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="name" prop="name" min-width="120" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row['name'] }}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="code" prop="code" min-width="120" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row['code'] }}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="class_name" prop="class_name" min-width="120" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row['className'] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template slot-scope="scope">
            <el-popover
                placement="top-start"
                width="200"
                title="操作"
                trigger="hover"
            >
              <div>
                <el-button type="text" @click="()=>triggerModify(scope.row)">编辑</el-button>
                <el-button type="text" @click="()=>triggerDeleteRow(scope.row)">删除</el-button>
              </div>
              <el-button slot="reference" type="text">操作</el-button>

            </el-popover>
          </template>
        </el-table-column>

      </el-table>
    </div>

  </section>

</template>
<script>
import useTable from '@/hooks/useTable';
import axios from 'axios';
import { formData, formMethod, PageData, uniqWithKey } from '@/utils/formcommon';
import { openLayer } from '@/utils/layerdialog/layerdialog';
import { alertConfirm, alertWithPayload } from '@base/utils';

export default {
  data() {
    const { tableRowClickOnece } = useTable();
    return {
      dataList: [],
      total: 0,
      ...formData,
      queryParams: {
        ...PageData,
      },
      tableRowClickOnece,
    };
  },
  mounted() {
    this.getInfoList();
  },
  methods: {
    ...formMethod,
    async getInfoList() {
      this.loading = true;
      var result = await axios.post('/api/tb_dict/getlist', { ...this.queryParams }).then(res => res.data);
      this.dataList = result && result.data || [];
      this.total = result && result.count;
      this.loading = false;
    },
    async triggerDeleteRow(row) {
      await alertConfirm('确定删除吗？');
      var result = await axios.get(`/api/tb_dict/delbyid?id=${row?.id}`).then(res => res.data);
      alertWithPayload(result);
      if (result?.success) {
        this.getInfoList();
      }
    },
    async triggerModify(row) {
      var result = await openLayer({
        title: '',
        data() {
          return { row };
        },
        components: {
          modify: () => import('./modify.vue'),
        },
      });
      if (result?.success) {
        this.getInfoList();
      }
    },
  },
};
</script>
